<!-- 全天数据统计 -->
<template>
    <div class="app-monitor-b">

        <el-row :gutter="20">
            <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
                <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
            </el-col>
            <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
                <el-form ref="queryForm" size="mini" :inline="true" label-width="80px">
                    <el-button style="margin-right: 6px" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
                        circle @click="showLeft(show)"></el-button>
                    <el-form-item label="拌合楼" prop="stationCode">
                        <!-- <el-select style="width: 130px" v-model="queryParams.stationCode" clearable size="mini" -->
                        <el-select style="width: 130px" v-model="stationCode" clearable size="mini" placeholder="请选择拌合楼">
                            <el-option v-for="item in cementListData" :key="item.id" :label="item.name"
                                :value="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="配方编号">
                        <el-input style="width: 120px" size="mini" v-model="matchCode" clearable
                            placeholder="配方编号"></el-input>
                        <!-- <el-select v-model="matchCode" filterable style="width: 100%" placeholder="请选择" clearable :popper-append-to-body="false">
            <el-option v-for="item in matchCodeList" :key="item.matchCode" :label="item.matchCode" :value="item.matchCode"></el-option>
          </el-select> -->
                    </el-form-item>
                    <el-form-item label="选择日期">
                        <el-date-picker v-model="day" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date"
                            placeholder="选择日期" clearable></el-date-picker>
                    </el-form-item>
                    <!-- <el-form-item label="用料项目">
                <el-input style="width: 120px" v-model="queryParams.projectName" placeholder="用料项目" clearable
                    filterable></el-input>
            </el-form-item> -->

                    <!-- <el-form-item label="配方编号">
                <el-input style="width: 120px" v-model="queryParams.matchCode" placeholder="配方编号" clearable
                    filterable></el-input>
            </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="onSearch">搜索</el-button>
                        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
                    </el-form-item>
                </el-form>

                <!-- <div class="tabsBox">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全局图" name="0">
                    <div v-loading="loadingTx">
                        <div id="gradeGlobalChar">
                        </div>
                        <div class="info">
                            <p>{{ info }}</p>
                        </div>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="全天级配平均值" name="1">
                    <div v-loading="loadingTx">
                        <div id="gradeGlobalChar">
                        </div>
                        <div class="info">
                            <p>{{ info }}</p>
                        </div>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="油石比" name="2">
                    <div v-loading="loadingTx">
                        <div id="gradeGlobalChar">
                        </div>
                        <div class="info">
                            <p>{{ info }}</p>
                        </div>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="混合料出料温度" name="3">
                    <div v-loading="loadingTx">
                        <div id="gradeGlobalChar">
                        </div>
                        <div class="info">
                            <p>{{ info }}</p>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="关键筛孔通过率" name="4">
                    <div v-loading="loadingTx">
                        <div id="gradeGlobalChar">
                        </div>
                        <div class="info">
                            <p>{{ info }}</p>
                        </div>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="掺配比" name="5">
                    <div v-loading="loadingTx">
                        <div id="gradeGlobalChar">
                        </div>
                        <div class="info">
                            <p>{{ info }}</p>
                        </div>
                    </div>

                </el-tab-pane>
            </el-tabs>
        </div> -->
                <!-- 级配查看 -->
                <div v-loading="loading" ref="chartBox" class="giaoBox">
                    <el-tabs v-model="active">
                        <el-tab-pane label="全局图" name="gradeGlobalChar">
                            <div id="gradeGlobalChar"
                                :style="`width: ${chartWidth}px;height: ${chartHeight}px;zoom:${zoom};transform:scale(${1 / zoom});transform-origin:0 0`">
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="全天级配平均值" name="gradeAvgChar">
                            <div id="gradeAvgChar"
                                :style="`width: ${chartWidth}px;height: ${chartHeight}px;zoom:${zoom};transform:scale(${1 / zoom});transform-origin:0 0`">
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="油石比" name="asphaltAggregateRatioChar">
                            <div id="asphaltAggregateRatioChar"
                                :style="`width: ${chartWidth}px;height: ${chartHeight}px;zoom:${zoom};transform:scale(${1 / zoom});transform-origin:0 0`">
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="混合料出料温度" name="temperatureChar">
                            <div id="temperatureChar"
                                :style="`width: ${chartWidth}px;height: ${chartHeight}px;zoom:${zoom};transform:scale(${1 / zoom});transform-origin:0 0`">
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="关键筛孔通过率" name="sievePassRateChar">
                            <div id="sievePassRateChar"
                                :style="`width: ${chartWidth}px;height: ${chartHeight}px;zoom:${zoom};transform:scale(${1 / zoom});transform-origin:0 0`">
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="掺配比" name="mixtureRatioChar">
                            <div id="mixtureRatioChar"
                                :style="`width: ${chartWidth}px;height: ${chartHeight}px;zoom:${zoom};transform:scale(${1 / zoom});transform-origin:0 0`">
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="info">
                        <p>{{ info }}</p>
                    </div>
                </div>
            </el-col>
        </el-row>


    </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import constant from "@/api/waterStability/producedData/constant";
import { cementList } from "@/api/waterStability/producedData/monitor";
import {
    asphaltDataSievePage,
    getDayChartData,
    asphaltMatchTypeList,
    getLatestData,
    getMatchCodeList,
    getChartData,
    getLastData
} from "@/api/bitumenMixingStation/productionQuality/allDayData";
import workSiteLeft from "@/views/components/workSiteLeft";

export default {
    name: "monitor",
    components: { workSiteLeft },

    data() {
        return {
            show: true,
            rowObj: {
                T1: 3,
                T2: 24,
                T3: 21,
                T4: 24,
                F1: 0,
                F2: 0,
                F3: 24,
                F4: 24,
            },
            stationCodeA: '',
            matchCodeA: '',
            dayA: '',
            chartTx: null,
            info: '',
            loadingTx: false,
            matchCodeTxet: "",
            lineChar: null,
            forceCurve: false,
            matchTypeList: [], //级配类型
            btnLoading: false,
            cementListData: [], //拌合楼列表
            // 遮罩层
            loading: true,
            // 显示搜索条件
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            zoom: 1,
            chartWidth: 0,
            chartHeight: 400,
            loading: true,
            matchCodeList: [],
            stationCode: undefined,
            matchCode: undefined,
            day: undefined,
            asphaltMatchDicObj: constant.asphaltMatchDicObj,
            sieveSizeDictObj: constant.sieveSizeDictObj,
            active: 'gradeGlobalChar',
            info: '',
            gradeGlobalChar: null,
            gradeAvgChar: null,
            temperatureChar: null,
            asphaltAggregateRatioChar: null,
            sievePassRateChar: null,
            mixtureRatioChar: null
        };
    },
    created() {
        // this.getAsphaltMatchTypeList();
    },

    mounted() {
        // 如果dom节点未挂接完成，延迟处理
        this.getCementList()
        this.getMatchCodeList();

        if (0 == Object.keys(this.$refs)) {
            setTimeout(() => {
                this.init();
            }, 200);
        } else {
            this.init();
        }
    },
    methods: {
        showLeft(show) {
            this.show = !show;
        },
        queryVal(val) {
            this.queryParams.id = val.id;
            this.onSearch();
        },
        init() {
            this.onSearch();
        },


        async init() {
            // this.chartHeight = 100 * window.devicePixelRatio;
            // this.chartWidth = 100 * window.devicePixelRatio;
            this.chartWidth = this.$refs.chartBox.clientWidth;

            await this.getLastData();

            // 执行查询
            this.onSearch();
        },


        // // 级配类型
        // getAsphaltMatchTypeList() {
        //     asphaltMatchTypeList().then((res) => {
        //         this.matchTypeList = res.data;
        //     });
        // },
        // 查询拌合楼下拉列表
        getCementList() {
            cementList(this.queryParams).then((res) => {
                this.cementListData = res.data || [];
            });
        },


        /**
         * 获取最新一条数据
         */
        getLastData() {
            return getLastData().then((res) => {
                console.log(res);
                if (!!res.data) {
                    let dischargeTime = res.data.dischargeTime;
                    if (10 < dischargeTime.length) {
                        dischargeTime = dischargeTime.substring(0, 10);
                    }
                    this.stationCode = res.data.stationCode;
                    this.matchCode = res.data.matchCode;
                    this.day = dischargeTime;
                }
            });
        },

        /**
         * 获取配方号列表
         */
        getMatchCodeList() {
            let params = {};
            this.matchCodeList = [];
            this.matchCode = undefined;
            if (!!this.stationCode) {
                params['stationCode'] = this.stationCode;
            }
            getMatchCodeList(params).then((res) => {
                this.matchCodeList = res.data;
            });
        },

        /**
     * 数据查询
     */
        onSearch() {
            // 判断查询条件是否完整
            if (!this.matchCode) {
                this.$message({
                    showClose: true,
                    message: '请选择配方编号',
                    type: 'warning'
                });
                this.loading = false;
                return;
            }
            if (!this.day) {
                this.$message({
                    showClose: true,
                    message: '请选择日期',
                    type: 'warning'
                });
                this.loading = false;
                return;
            }

            // 执行查询操作
            this.loading = true;
            getDayChartData({
                id: this.queryParams.id,
                stationCode: this.stationCode,
                matchCode: this.matchCode,
                day: this.day
            })
                .then((res) => {
                    this.createChart(res.data);
                    this.loading = false;
                })
                .catch(() => {
                    this.createChart(undefined);
                    this.loading = false;
                });
        },

        /**
         * 处理图表数据
         */
        createChart(res) {
            // 获取返回结果数据
            let station = { name: '' };
            let match = {};
            let matchThreshold = {};
            let matchType = {};
            let targetMap = {};
            let sieveDataAvg = {};
            let details = [];
            console.log(res);
            if (!!res) {
                if (!!res.data.station) {
                    station = res.station;
                }
                if (!!res.match) {
                    match = res.match;
                }
                if (!!res.matchThreshold) {
                    matchThreshold = res.matchThreshold;
                }
                if (!!res.matchType) {
                    matchType = res.matchType;
                }
                if (!!res.targetMap) {
                    targetMap = res.targetMap;
                }
                if (!!res.sieveDataAvg) {
                    sieveDataAvg = res.sieveDataAvg;
                }
                if (!!res.details) {
                    details = res.details;
                }
            }

            // 设置提示信息
            this.info = station.name + '  ' + this.matchCode + ' @ ' + this.day + ' 盘数：' + details.length;

            // 获取需要显示的筛孔数据
            let sieveCodeArray = [];
            let sieveXData = [0];
            let sieveMin = {
                name: '施工下限',
                type: 'line',
                data: [undefined],
                itemStyle: {
                    normal: {
                        color: '#F3637C',
                        lineStyle: {
                            type: 'dotted' //'dotted'虚线 'solid'实线
                        }
                    }
                }
            };
            let sieveMax = {
                name: '施工上限',
                type: 'line',
                data: [undefined],
                itemStyle: {
                    normal: {
                        color: '#F3637C',
                        lineStyle: {
                            type: 'dotted' //'dotted'虚线 'solid'实线
                        }
                    }
                }
            };
            let sieveTar = {
                name: '设计生产级配',
                type: 'line',
                data: [undefined],
                itemStyle: {
                    normal: {
                        color: '#4CCB72',
                        lineStyle: {
                            type: 'solid' //'dotted'虚线 'solid'实线
                        }
                    }
                }
            };
            let sieveAvg = {
                name: '均值数据',
                type: 'line',
                data: [undefined],
                itemStyle: {
                    normal: {
                        color: '#409eff'
                    }
                }
            };
            if (!!matchType.sieveArray) {
                matchType.sieveArray.forEach((item) => {
                    sieveXData.push(item);

                    let code = item.toString().replace('.', 'd');
                    sieveCodeArray.push(code);
                    sieveMin.data.push(matchThreshold['sieve' + code + 'min']);
                    sieveMax.data.push(matchThreshold['sieve' + code + 'max']);
                    sieveTar.data.push(targetMap[code]);
                    sieveAvg.data.push(sieveDataAvg['sieve' + code]);
                });
            }

            // 温度上下限数值
            let temperatureMax = match.temperatureMax;
            let temperatureMin = match.temperatureMin;

            // 油石比上下限
            let asphaltAggregateBase = match.asphaltAggregateRatio;
            let asphaltAggregateMin = undefined;
            let asphaltAggregateMax = undefined;
            let asphaltAggregateError = match.asphaltAggregateError;
            if (!!asphaltAggregateBase && !!asphaltAggregateError) {
                asphaltAggregateMin = asphaltAggregateBase - asphaltAggregateError;
                asphaltAggregateMax = asphaltAggregateBase + asphaltAggregateError;
            }

            // 关键筛孔，只显示0.075, 2.36, 4.75, 9.5, 13.2
            let sievePassRateObj = {};
            sieveCodeArray.forEach((item) => {
                if ('0d075' == item || '2d36' == item || '4d75' == item || '9d5' == item || '13d2' == item) {
                    sievePassRateObj[item] = {
                        name: this.sieveSizeDictObj[item].size,
                        type: 'line',
                        label: {
                            show: false
                        },
                        data: [],
                        itemStyle: {
                            normal: {
                                color: this.sieveSizeDictObj[item].color
                            }
                        }
                    };
                }
            });

            // 掺配比
            let mixtureRatioObj = {};
            for (let key in this.asphaltMatchDicObj) {
                if (!!match[key]) {
                    let mixtureRatioName = !!match[key + 'Name'] ? match[key + 'Name'] : this.asphaltMatchDicObj[key].name;
                    mixtureRatioObj[key] = {
                        name: mixtureRatioName,
                        type: 'line',
                        label: {
                            show: false
                        },
                        data: [],
                        itemStyle: {
                            normal: {
                                color: this.asphaltMatchDicObj[key].color
                            }
                        }
                    };
                }
            }

            // 处理生产数据
            let timeXData = [];
            let globalSieveList = [];
            let temperatureData = [];
            let temperatureMaxData = [];
            let temperatureMinData = [];

            let asphaltAggregateData = [];
            let asphaltAggregateBaseData = [];
            let asphaltAggregateMaxData = [];
            let asphaltAggregateMinData = [];
            details.forEach((data) => {
                // 记录生产时间
                timeXData.push(data.dischargeTime);

                // 记录温度数据
                temperatureData.push(data.dischargeTemperature);
                temperatureMaxData.push(temperatureMax);
                temperatureMinData.push(temperatureMin);

                // 记录油石比数据
                asphaltAggregateData.push(data.asphaltAggregateRatio);
                asphaltAggregateBaseData.push(asphaltAggregateBase);
                asphaltAggregateMaxData.push(asphaltAggregateMax);
                asphaltAggregateMinData.push(asphaltAggregateMin);

                // 关键筛孔通过率
                for (let key in sievePassRateObj) {
                    sievePassRateObj[key].data.push(data['sieve' + key]);
                }

                // 掺配比
                for (let key in mixtureRatioObj) {
                    mixtureRatioObj[key].data.push(data[key + 'RatioW']);
                }

                // 全天生产数据
                let sieveRelData = [undefined];
                sieveCodeArray.forEach((code) => {
                    sieveRelData.push(data['sieve' + code]);
                });
                globalSieveList.push({
                    name: '生产级配',
                    type: 'line',
                    data: sieveRelData,
                    itemStyle: {
                        normal: {
                            color: '#409eff'
                        }
                    }
                });
            });
            globalSieveList.push(sieveMin);
            globalSieveList.push(sieveMax);
            globalSieveList.push(sieveTar);

            // 全天筛孔数据
            this.createGradeGlobalChar(sieveXData, globalSieveList);

            // 筛孔平均值
            this.createGradeAvgChar(sieveXData, [sieveAvg, sieveMin, sieveMax, sieveTar]);

            // 创建油石比图
            this.createAsphaltAggregateRatioChar(timeXData, asphaltAggregateData, asphaltAggregateMaxData, asphaltAggregateMinData, asphaltAggregateBaseData);

            // 出料温度图
            this.createTemperatureChar(timeXData, temperatureData, temperatureMinData, temperatureMaxData);

            // 关键筛孔通过率
            this.createSievePassRateChar(timeXData, sievePassRateObj);

            // 掺配比
            this.createMixtureRatioChar(timeXData, mixtureRatioObj);
        },

        /**
         * 创建全天图
         */
        createGradeGlobalChar(xData, seriesList) {
            if (null == this.gradeGlobalChar) {
                this.gradeGlobalChar = echarts.init(document.getElementById('gradeGlobalChar'));
            } else {
                this.gradeGlobalChar.clear();
            }

            let option = {
                title: {
                    text: '全局图（' + this.matchCode + '）' + this.day
                },
                legend: {
                    data: ['设计生产级配', '施工上限', '施工下限'],
                    right: 80
                },
                tooltip: {
                    show: false
                },
                toolbox: {
                    right: 40,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    name: '筛孔尺寸',
                    boundaryGap: false,
                    nameTextStyle: {
                        padding: [15, 0, 0, 0] // 四个数字分别为上右下左与原位置距离
                    },
                    nameRotate: 0,
                    data: xData
                },
                yAxis: {
                    type: 'value',
                    name: '通过率%'
                },
                grid: {
                    top: 60,
                    bottom: 40,
                    left: 80,
                    right: 80
                },
                series: seriesList
            };

            this.gradeGlobalChar.setOption(option);
        },

        /**
         * 创建平均图
         */
        createGradeAvgChar(xData, seriesList) {
            if (null == this.gradeAvgChar) {
                this.gradeAvgChar = echarts.init(document.getElementById('gradeAvgChar'));
            } else {
                this.gradeAvgChar.clear();
            }

            let option = {
                title: {
                    text: '全天级配均值图（' + this.matchCode + '）' + this.day
                },
                legend: {
                    data: ['均值数据', '设计生产级配', '施工上限', '施工下限'],
                    right: 80
                },
                tooltip: {
                    trigger: 'axis',
                    show: true
                },
                toolbox: {
                    right: 40,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    name: '筛孔尺寸',
                    boundaryGap: false,
                    nameTextStyle: {
                        padding: [15, 0, 0, 0] // 四个数字分别为上右下左与原位置距离
                    },
                    nameRotate: 0,
                    data: xData
                },
                yAxis: {
                    type: 'value',
                    name: '通过率%'
                },
                grid: {
                    top: 60,
                    bottom: 40,
                    left: 80,
                    right: 80
                },
                series: seriesList
            };

            this.gradeAvgChar.setOption(option);
        },

        /**
         * 创建油石比图
         */
        createAsphaltAggregateRatioChar(xData, sData, maxData, minData, baseData) {
            if (null == this.asphaltAggregateRatioChar) {
                this.asphaltAggregateRatioChar = echarts.init(document.getElementById('asphaltAggregateRatioChar'));
            } else {
                this.asphaltAggregateRatioChar.clear();
            }

            let option = {
                title: {
                    text: '油石比（' + this.matchCode + '）' + this.day
                },
                legend: {
                    data: ['生产值', '上限值', '下限值', '基准线'],
                    right: 80
                },
                tooltip: {
                    trigger: 'axis',
                    show: true
                },
                toolbox: {
                    right: 40,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    name: '时间',
                    nameTextStyle: {
                        // padding: [30, 0, 0, 0]    // 四个数字分别为上右下左与原位置距离
                    },
                    data: xData,
                    boundaryGap: false,
                    axisLine: { onZero: true },
                    splitLine: { show: false },
                    splitArea: { show: false }
                },
                yAxis: {
                    type: 'value',
                    name: '油石比%'
                },
                grid: {
                    top: 60,
                    bottom: 40,
                    left: 80,
                    right: 80
                },
                series: [
                    {
                        name: '生产值',
                        type: 'line',
                        label: {
                            show: false
                        },
                        data: sData,
                        itemStyle: {
                            normal: {
                                color: '#409eff'
                            }
                        }
                    },
                    {
                        name: '上限值',
                        type: 'line',
                        label: {
                            show: false
                        },
                        data: maxData,
                        itemStyle: {
                            normal: {
                                color: '#F3637C',
                                lineStyle: {
                                    type: 'dotted' //'dotted'虚线 'solid'实线
                                }
                            }
                        }
                    },
                    {
                        name: '下限值',
                        type: 'line',
                        label: {
                            show: false
                        },
                        data: minData,
                        itemStyle: {
                            normal: {
                                color: '#F3637C',
                                lineStyle: {
                                    type: 'dotted' //'dotted'虚线 'solid'实线
                                }
                            }
                        }
                    },
                    {
                        name: '基准线',
                        type: 'line',
                        label: {
                            show: false
                        },
                        data: baseData,
                        itemStyle: {
                            normal: {
                                color: '#8bc34a',
                                lineStyle: {
                                    type: 'dotted' //'dotted'虚线 'solid'实线
                                }
                            }
                        }
                    }
                ]
            };

            this.asphaltAggregateRatioChar.setOption(option);
        },

        /**
         * 创建出料温度图
         */
        createTemperatureChar(xData, sData, minData, maxData) {
            if (null == this.temperatureChar) {
                this.temperatureChar = echarts.init(document.getElementById('temperatureChar'));
            } else {
                this.temperatureChar.clear();
            }

            let option = {
                title: {
                    text: '混合料出料温度（' + this.matchCode + '）' + this.day
                },
                legend: {
                    data: ['温度', '温度上限', '温度下限'],
                    right: 80
                },
                tooltip: {
                    trigger: 'axis',
                    show: true
                },
                toolbox: {
                    right: 40,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    name: '时间',
                    nameTextStyle: {
                        // padding: [50, -55, 0, 0]    // 四个数字分别为上右下左与原位置距离
                    },
                    data: xData
                },
                yAxis: {
                    type: 'value',
                    name: '温度\u2103'
                },
                grid: {
                    top: 60,
                    bottom: 40,
                    left: 80,
                    right: 80
                },
                series: [
                    {
                        name: '温度',
                        type: 'line',
                        label: {
                            show: false
                        },
                        data: sData,
                        itemStyle: {
                            normal: {
                                color: '#409eff'
                            }
                        }
                    },
                    {
                        name: '温度上限',
                        type: 'line',
                        label: {
                            show: false
                        },
                        data: maxData,
                        itemStyle: {
                            normal: {
                                color: '#F3637C',
                                lineStyle: {
                                    type: 'dotted' //'dotted'虚线 'solid'实线
                                }
                            }
                        }
                    },
                    {
                        name: '温度下限',
                        type: 'line',
                        label: {
                            show: false
                        },
                        data: minData,
                        itemStyle: {
                            normal: {
                                color: '#F3637C',
                                lineStyle: {
                                    type: 'dotted' //'dotted'虚线 'solid'实线
                                }
                            }
                        }
                    }
                ]
            };

            this.temperatureChar.setOption(option);
        },

        /**
         * 关键筛孔通过率
         */
        createSievePassRateChar(xData, sDataObj) {
            if (null == this.sievePassRateChar) {
                this.sievePassRateChar = echarts.init(document.getElementById('sievePassRateChar'));
            } else {
                this.sievePassRateChar.clear();
            }

            let sData = [];
            for (let key in sDataObj) {
                sData.push(sDataObj[key]);
            }

            let option = {
                title: {
                    text: '关键筛孔通过率（' + this.matchCode + '）' + this.day
                },
                legend: {
                    show: true,
                    width: '70%',
                    formatter: (params) => {
                        return params + 'mm';
                    },
                    itemWidth: 15,
                    itemHeight: 10,
                    textStyle: {
                        fontSize: 10
                    },
                    right: 80
                },
                tooltip: {
                    trigger: 'axis',
                    show: true
                },
                toolbox: {
                    right: 40,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    name: '时间',
                    data: xData,
                    nameTextStyle: {
                        // padding: [50, -55, 0, 0]    // 四个数字分别为上右下左与原位置距离
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '通过率%',
                    max: 'dataMax'
                },
                grid: {
                    top: 60,
                    bottom: 40,
                    left: 80,
                    right: 80
                },
                series: sData
            };

            this.sievePassRateChar.setOption(option);
        },

        /**
         * 掺配比图表
         */
        createMixtureRatioChar(xData, sDataObj) {
            if (null == this.mixtureRatioChar) {
                this.mixtureRatioChar = echarts.init(document.getElementById('mixtureRatioChar'));
            } else {
                this.mixtureRatioChar.clear();
            }

            let sData = [];
            for (let key in sDataObj) {
                sData.push(sDataObj[key]);
            }

            let option = {
                title: {
                    text: '掺配比（' + this.matchCode + '）' + this.day
                },
                legend: {
                    show: true,
                    right: 80
                },
                tooltip: {
                    trigger: 'axis',
                    show: true
                },
                toolbox: {
                    right: 40,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    name: '时间',
                    nameTextStyle: {
                        // padding: [50, -55, 0, 0]    // 四个数字分别为上右下左与原位置距离
                    },
                    data: xData
                },
                yAxis: {
                    type: 'value',
                    name: '掺配比%'
                },
                grid: {
                    top: 60,
                    bottom: 40,
                    left: 80,
                    right: 80
                },
                series: sData
            };

            this.mixtureRatioChar.setOption(option);
        },



    }

};
</script>
<style scoped lang="scss">
.app-monitor-b {
    padding-top: 16px;
    user-select: none;

    .giaoBox {
        padding: 10px;
    }

    .tabsBox {
        margin: 0 20px;
    }

    .link {
        color: #2d8cf0 !important;
    }

    .showType {
        margin-bottom: 20px;
    }

    .custom_date_class {
        span::after {
            display: block;
            position: absolute;
            content: '';
            right: 50%;
            bottom: -3px;
            width: 5px;
            transform: translateX(50%);
            height: 5px;
            border-radius: 50%;
            background: #ea6151;
            color: red;
            color: #fff !important;

            &:hover {
                background-color: #409eff;
            }
        }
    }

    .el-tab-pane,
    .el-tabs {
        width: 100%;
    }

    .clintBox {
        width: 100%;
        height: 100%;
    }

    .chartBox {
        width: 100%;
        height: 450px;
    }
}

.fenye {
    width: 100%;
    height: 80px;
}
</style>

<style scoped>
#lineChar {
    height: 28.571429rem;
    width: 100%;
}

#gradeGlobalChar {
    width: 1000px;
    height: 500px;
}

.el-col {
    border: 1px solid transparent;
}
</style>

